<script setup lang="ts">
import { useFeedbackController } from '@/utils/feedback-util'
import { reactive, ref } from 'vue'
import { doChangePassword, doLogout } from '@/api/passport-api'
import type { FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'

const props = defineProps(['modelValue'])
const emits = defineEmits(['update:modelValue'])

//<--对话框打开关闭控制
const { isShow, close } = useFeedbackController(props, emits)
//对话框打开关闭控制-->

const request = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const changePasswordFormRef = ref()

const validateOldPassword = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  }
}

const validateNewPassword = (rule: any, value: any, callback: any) => {
  if (value === '' || value.trim() === '') {
    callback(new Error('请输入新密码'))
  } else {
    if (request.value.confirmPassword !== '') {
      if (!changePasswordFormRef.value) return
      changePasswordFormRef.value.validateField('confirmPassword', () => null)
    }
    callback()
  }
}

const validateConfirmPassword = (rule: any, value: any, callback: any) => {
  if (value === '') {
    callback(new Error('请再次输入新密码'))
  } else if (value !== request.value.newPassword) {
    callback(new Error('两次输入新密码不一致'))
  } else {
    callback()
  }
}

const rules = reactive<FormRules<typeof request>>({
  oldPassword: [{ validator: validateOldPassword, trigger: 'blur' }],
  newPassword: [{ validator: validateNewPassword, trigger: 'blur' }],
  confirmPassword: [{ validator: validateConfirmPassword, trigger: 'blur' }]
})

function changePassword() {
  doChangePassword({
    oldPassword: request.value.oldPassword,
    newPassword: request.value.newPassword
  }).then((res) => {
    if (res.data) {
      ElMessage({
        type: 'success',
        message: '密码修改成功'
      })
      doLogout()
    } else {
      ElMessage({
        type: 'error',
        message: '密码修改失败'
      })
    }
  })
}
</script>

<template>
  <el-dialog
    class="change-password"
    v-model="isShow"
    :show-close="true"
    top="10vh"
    :close-on-click-modal="false"
  >
    <template #header>修改密码</template>
    <el-form
      :rules="rules as any"
      :model="request"
      ref="changePasswordFormRef"
      label-width="auto"
      label-position="right"
    >
      <el-form-item label="密码" required prop="oldPassword">
        <el-input
          type="password"
          v-model="request.oldPassword"
          placeholder="请输入密码"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="新密码" required prop="newPassword">
        <el-input
          type="password"
          v-model="request.newPassword"
          placeholder="请输入新密码"
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="确认新密码" required prop="confirmPassword">
        <el-input
          type="password"
          v-model="request.confirmPassword"
          placeholder="请再次输入新密码"
          autocomplete="off"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="close"> 取消</el-button>
      <el-button @click="changePassword" type="primary"> 确认</el-button>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss"></style>
<style lang="scss">
.change-password {
  .el-dialog__header {
    margin-right: 0;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--el-border-color);
  }

  .el-dialog__body {
    padding: 20px 20px;
  }

  .el-dialog__footer {
    padding-top: 0;
  }
}
</style>
